<template>
    <div style="margin-top: 30px; padding-right: 20px">
        <el-form label-width="18%" style="display: grid;gap: 16px;grid-template-columns: repeat(3, 1fr);">
            <el-form-item label="外部接口ID">
                <el-input v-model="searchFormInterfaceId" placeholder="外部接口ID" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="表单">
                <el-select v-model="searchFormId" placeholder="表单" @change="changeForm()" :clearable="true">
                    <el-option :label="item.nameCn" :value="item.id" v-for="item in onlineFormList" :key="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="表单版本">
                <el-select v-model="searchFormVersion" placeholder="表单版本">
                    <el-option :label="item.innerName" :value="item.version" v-for="item in formVersionList" :key="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="外部接口中文名称">
                <el-input v-model="searchFormNameCn" placeholder="外部接口中文名称" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="外部接口英文名称">
                <el-input v-model="searchFormNameCn" placeholder="外部接口英文名称" :clearable="true"></el-input>
            </el-form-item>
        </el-form>
        <div class="formSubmitButton">
            <el-button @click="resetForm()">重 置</el-button>
            <el-button type="primary" :loading="searchLoading" @click="searchClick()">查 询</el-button>
        </div>
    </div>

    <div style="display: flex; justify-content: right">
        <el-button type="primary" style="margin-right: 20px" @click="addFormInterface()">添加外部接口</el-button>
    </div>

    <div style="padding-left: 20px; padding-right: 20px; margin-top: 20px" v-loading="formTableLoading">
        <el-table
            :data="formInterfaceDataList"
            style="width: 100%;"
            row-key="id"
            border
            :stripe="true"
            :show-overflow-tooltip="true"
            class="tableContainer"
            max-height="70vh"
        >
            <el-table-column prop="id" label="外部接口ID" />
            <el-table-column prop="code" label="外部接口编码" />
            <el-table-column prop="nameCn" label="外部接口中文名" />
            <el-table-column prop="nameEn" label="外部接口英文名" />
            <el-table-column prop="formId" label="表单ID" />
            <el-table-column prop="formVersion" label="表单版本" />
            <el-table-column prop="status" label="状态" >
                <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.status === `DRAFT`">草稿</el-tag>
                    <el-tag type="success" v-if="scope.row.status === `ONLINE`">已发布</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="currentVersion" label="当前版本" align="center">
                <template #default="scope">
                    <a style="display:block;width:100%;color: #409EFF" @click="versionClick(scope.$index, scope.row)">
                        {{scope.row.currentVersion}}
                        <component is="CopyOutlined" v-if="scope.row.hasNotReleased" style="padding-left: 1%"/>
                    </a>
                </template>
            </el-table-column>

            <el-table-column align="center" width="300px">
                <template #header>
                    <span>操 作</span>
                </template>
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleUpdateInterface(scope.$index, scope.row)">编 辑</el-button>
                    <el-button size="small" type="success" @click="handlePublishInterface(scope.$index, scope.row)">发 布</el-button>
                    <el-button type="danger" size="small" @click="handleDeleteInterface(scope.$index, scope.row)">删 除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div style="padding-right: 20px;">
        <el-pagination
            v-model:current-page="pageIndex"
            v-model:page-size="pageSize"
            layout="prev, pager, next, jumper, sizes, total"
            :background="true"
            :total="recordCount"
            style="margin-top: 30px;width: 100%;display: flex; align-items: center;justify-content: right"
            @change="changePage"
            :page-sizes="[10, 20, 30, 40, 50]"
        />
    </div>

    <div>
        <el-dialog
            v-model="isShowDrawer"
            :title="showTitle"
            width="40%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <el-form label-width="10%" style="margin-top: 30px" :model="dialogFormInfo" :rules="formRules" ref="dialogFormRef">
                <el-form-item label="外部接口编码" label-width="20%" prop="code">
                    <el-input v-model="dialogFormInfo.code" placeholder="外部接口编码" clearable :disabled="!isAdd"/>
                </el-form-item>
                <el-form-item label="外部接口中文名称" label-width="20%" prop="nameCn">
                    <el-input v-model="dialogFormInfo.nameCn" placeholder="外部接口中文名称" clearable />
                </el-form-item>
                <el-form-item label="外部接口英文名称" label-width="20%" prop="nameEn">
                    <el-input v-model="dialogFormInfo.nameEn" placeholder="外部接口英文名称" clearable />
                </el-form-item>
                <el-form-item label="表单" label-width="20%" prop="formId">
                    <el-select v-model="dialogFormInfo.formId" placeholder="表单" @change="changeDialogForm()" :clearable="true" :disabled="!isAdd">
                        <el-option :label="item.nameCn" :value="item.id" v-for="item in onlineFormList" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="表单版本" label-width="20%" prop="version">
                    <el-select v-model="dialogFormInfo.version" placeholder="表单版本" @change="changeDialogVersion()" :disabled="!isAdd">
                        <el-option :label="item.innerName" :value="item.version" v-for="item in dialogVersionList" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="接口条件字段" label-width="20%" prop="condition">
                    <el-select v-model="dialogFormInfo.condition" placeholder="接口条件字段" multiple>
                        <el-option :label="item.labelName" :value="item.id" v-for="item in dialogFormJsonList" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="接口返回字段" label-width="20%" prop="result">
                    <el-select v-model="dialogFormInfo.result" placeholder="接口返回字段" multiple>
                        <el-option :label="item.labelName" :value="item.id" v-for="item in dialogFormJsonList" :key="item.id"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelAddFormInterface()">取消</el-button>
                <el-button @click="commitAddFormInterface()" :loading="addFormInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isDeleteShowDrawer"
            title="删除表单接口"
            width="20%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <span>是否确认删除？</span>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelDeleteFormInterface()">取消</el-button>
                <el-button @click="commitDeleteFormInterface()" :loading="deleteInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isPublishShowDrawer"
            title="发布表单接口"
            width="20%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <span>是否确认发布？</span>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelPublishFormInterface()">取消</el-button>
                <el-button @click="commitPublishFormInterface()" :loading="publishInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isVersionListShowDrawer"
            title="发布表单接口"
            width="70%"
            :close-on-click-modal="false"
        >
            <el-table
                :data="versionList"
                style="width: 100%;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="id" label="版本ID" />
                <el-table-column prop="nameCn" label="外部接口中文名" />
                <el-table-column prop="nameEn" label="外部接口英文名" />
                <el-table-column prop="formId" label="表单ID" />
                <el-table-column prop="formVersion" label="表单版本" />
                <el-table-column prop="version" label="接口版本" />
                <el-table-column align="center" width="300px">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handleVersionTest(scope.$index, scope.row)">调 试</el-button>
                        <el-button size="small" v-if="scope.row.version !== 0" type="success" @click="handleBackVersion(scope.$index, scope.row)">回 退</el-button>
                        <el-button type="danger" v-if="scope.row.version === 0" size="small" @click="handleDeleteVersion(scope.$index, scope.row)">删 除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isDeleteVersionShowDrawer"
            title="删除草稿版本"
            width="20%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <span>是否确认删除？</span>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelDeleteVersionInterface()">取消</el-button>
                <el-button @click="commitDeleteVersionInterface()" :loading="deleteVersionInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isBackVersionShowDrawer"
            title="回退版本"
            width="20%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <span>是否确认回退？</span>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="cancelBackVersionInterface()">取消</el-button>
                <el-button @click="commitBackVersionInterface()" :loading="backVersionInterfaceLoading" type="primary">提交</el-button>
            </div>
        </el-dialog>
    </div>

    <div>
        <el-dialog
            v-model="isTestVersionShowDrawer"
            title="接口调试"
            width="70%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <el-divider>输入</el-divider>
            <el-form label-width="10%" style="margin-top: 30px">
                <el-form-item v-for="(item, index) in testVersionComponentList" :label="item.labelName">
                    <el-input v-model="item.value"></el-input>
                </el-form-item>
            </el-form>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="commitTestVersionInterface()" :loading="testVersionInterfaceLoading" type="primary">调 试</el-button>
            </div>
            <el-divider>输出</el-divider>
            <el-input v-model="outputInfo" disabled type="textarea" :autosize="{ minRows: 5, maxRows: 10 }"/>
            <div class="formSubmitButton" style="margin-top: 30px">
                <el-button @click="isTestVersionShowDrawer = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    backInterfaceVersion,
    createFormInterface, deleteFormInterface, deleteInterfaceVersion, execByVersion, publishFormInterface,
    queryFormInterfacePageList,
    queryFormPageList, queryInterfaceVersionList,
    queryVersionInfo,
    queryVersionList, updateFormInterface
} from "@/request/flow";
import {ElNotification} from "element-plus";
import YwuFormInput from "@/views/bpmn/form/component/YwuFormInput";

export default {
    name: "FormInterfaceList",
    data() {
        return {
            searchFormInterfaceId: "",
            searchFormId: "",
            searchFormVersion: "",
            searchFormNameCn: "",
            searchFormNameEn: "",
            onlineFormList: [],
            formVersionList: [],
            searchLoading: false,
            pageIndex: 1,
            pageSize: 10,
            recordCount: 0,
            formInterfaceDataList: [],
            isShowDrawer: false,
            showTitle: "",
            isAdd: true,
            dialogFormInfo: {},
            dialogVersionList: [],
            dialogFormJsonList: [],
            addFormInterfaceLoading: false,
            formTableLoading: false,
            formRules: {
                code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
                nameCn: [{ required: true, message: '中文名称不能为空', trigger: 'blur' }],
                nameEn: [{ required: true, message: '英文名称不能为空', trigger: 'blur' }],
                formId: [{ required: true, message: '表单不能为空', trigger: 'blur' }],
                version: [{ required: true, message: '版本不能为空', trigger: 'blur' }],
                condition: [{ required: true, message: '条件不能为空', trigger: 'blur' }],
                result: [{ required: true, message: '返回字段不能为空', trigger: 'blur' }]
            },
            isDeleteShowDrawer: false,
            deleteInterfaceLoading: false,
            isPublishShowDrawer: false,
            publishInterfaceLoading: false,
            isVersionListShowDrawer: false,
            versionList: [],
            isDeleteVersionShowDrawer: false,
            deleteVersionLoading: false,
            versionInfo: {},
            deleteVersionInterfaceLoading: false,
            isBackVersionShowDrawer: false,
            backVersionInterfaceLoading: false,
            isTestVersionShowDrawer: false,
            testVersionInterfaceLoading: false,
            testVersionGlobalProperties: {
                colNum: 1
            },
            testVersionComponentList: [],
            formColStyle: "",
            outputInfo: "",
            testVersionInfo: {}
        }
    },
    components: {
        YwuFormInput
    },
    methods: {
        changeForm() {
            this.formVersionList = []
            this.searchFormVersion = "";
            // 查询当前表单的
            if (this.searchFormId) {
                // 查询当前表单下的所有版本
                let param = {
                    id: this.searchFormId
                }
                queryVersionList(param).then(res => {
                    if (res.code === "200") {
                        this.formVersionList = []
                        let dataInfo = res.data;
                        for (let index = 0; index < dataInfo.length; index++) {
                            if (dataInfo[index].version === 0) {
                                continue;
                            }
                            dataInfo[index].innerName = "版本" + dataInfo[index].version;
                            this.formVersionList.push(dataInfo[index])
                        }
                    }
                })
            }
        },
        changeDialogForm() {
            this.dialogVersionList = []
            this.dialogFormInfo.version = ""
            // 查询当前表单的
            if (this.dialogFormInfo.formId) {
                // 查询当前表单下的所有版本
                let param = {
                    id: this.dialogFormInfo.formId
                }
                queryVersionList(param).then(res => {
                    if (res.code === "200") {
                        this.dialogVersionList = []
                        let dataInfo = res.data;
                        for (let index = 0; index < dataInfo.length; index++) {
                            if (dataInfo[index].version === 0) {
                                continue;
                            }
                            dataInfo[index].innerName = "版本" + dataInfo[index].version;
                            this.dialogVersionList.push(dataInfo[index])
                        }
                    }
                })
            }
        },
        changeDialogVersion() {
            this.dialogFormJsonList = [];
            this.dialogFormInfo.condition = [];
            // 查询表单基本信息
            queryVersionInfo({resourceId: this.dialogFormInfo.formId, version: this.dialogFormInfo.version}).then(res => {
                let formJson = res.data.formJson
                // 序列化json
                let jsonInfo = JSON.parse(formJson);
                this.dialogFormJsonList = jsonInfo.componentJson
            })
        },
        resetForm() {
            this.searchFormInterfaceId = "";
            this.searchFormId = "";
            this.searchFormVersion = "";
            this.searchFormNameCn = "";
            this.searchFormNameEn = "";
        },
        searchClick() {
            this.searchLoading = true;
            // 分页查询列表
            let pageParam = {
                pageInfo: {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize
                },
                id: this.searchFormInterfaceId,
                formId: this.searchFormId,
                formVersion: this.searchFormVersion,
                nameCn: this.searchFormNameCn,
                nameEn: this.searchFormNameEn
            }
            queryFormInterfacePageList(pageParam).then(res => {
                if (res.code === "200") {
                    this.pageIndex = res.data.pageIndex;
                    this.pageSize = res.data.pageSize;
                    this.recordCount = res.data.recordCount;
                    this.formInterfaceDataList = res.data.dataList;
                }
                this.searchLoading = false;
            }).catch(res => {
                this.searchLoading = false;
            })
        },
        changePage() {
            // 分页查询列表
            let pageParam = {
                pageInfo: {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize
                },
                id: this.searchFormInterfaceId,
                formId: this.searchFormId,
                formVersion: this.searchFormVersion,
                nameCn: this.searchFormNameCn,
                nameEn: this.searchFormNameEn
            }
            queryFormInterfacePageList(pageParam).then(res => {
                if (res.code === "200") {
                    this.pageIndex = res.data.pageIndex;
                    this.pageSize = res.data.pageSize;
                    this.recordCount = res.data.recordCount;
                    this.formInterfaceDataList = res.data.dataList;
                }
            })
        },
        addFormInterface() {
            this.showTitle = "添加外部接口";
            this.isAdd = true;
            this.dialogFormInfo = {};
            this.dialogVersionList = [];
            this.dialogFormJsonList = [];
            this.isShowDrawer = true;
        },
        versionClick(index, row) {
            // 查询表单外部接口历史版本列表
            let param = {
                id: row.id
            }
            this.versionList = []
            this.isVersionListShowDrawer = true;
            queryInterfaceVersionList(param).then(res => {
                if (res.code === "200") {
                    let dataInfo = res.data;
                    for (let index = 0; index < dataInfo.length; index++) {
                        this.versionList = res.data;
                    }
                }
            })
        },
        handleUpdateInterface(index, row) {
            this.showTitle = "修改外部接口";
            this.isAdd = false;
            this.dialogFormInfo = {
                id: row.id,
                code: row.code,
                nameCn: row.nameCn,
                nameEn: row.nameEn,
                formId: row.formId,
                version: parseInt(row.formVersion),
                condition: JSON.parse(row.formConditionJson),
                result: JSON.parse(row.formResJson),
            };
            this.dialogVersionList = [];
            this.dialogFormJsonList = [];
            this.isShowDrawer = true;
            // 根据当前的formId查询版本列表
            // 查询当前表单下的所有版本
            let param = {
                id: this.dialogFormInfo.formId
            }
            queryVersionList(param).then(res => {
                if (res.code === "200") {
                    this.dialogVersionList = []
                    let dataInfo = res.data;
                    for (let index = 0; index < dataInfo.length; index++) {
                        if (dataInfo[index].version === 0) {
                            continue;
                        }
                        dataInfo[index].innerName = "版本" + dataInfo[index].version;
                        this.dialogVersionList.push(dataInfo[index])
                    }
                }
            })
            // 根据表单ID和版本查询数据
            queryVersionInfo({resourceId: this.dialogFormInfo.formId, version: this.dialogFormInfo.version}).then(res => {
                let formJson = res.data.formJson
                // 序列化json
                let jsonInfo = JSON.parse(formJson);
                this.dialogFormJsonList = jsonInfo.componentJson
            })
        },
        handleDeleteInterface(index, row) {
            this.dialogFormInfo.id = row.id;
            this.isDeleteShowDrawer = true;
        },
        cancelDeleteFormInterface() {
            this.isDeleteShowDrawer = false;
        },
        commitDeleteFormInterface() {
            // 删除元素
            this.deleteInterfaceLoading = true;
            deleteFormInterface({id: this.dialogFormInfo.id}).then(res => {
                if (res.code === "200") {
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success',
                    })
                }
                // 分页查询列表
                let pageParam = {
                    pageInfo: {
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize
                    },
                    id: this.searchFormInterfaceId,
                    formId: this.searchFormId,
                    formVersion: this.searchFormVersion,
                    nameCn: this.searchFormNameCn,
                    nameEn: this.searchFormNameEn
                }
                queryFormInterfacePageList(pageParam).then(res => {
                    if (res.code === "200") {
                        this.pageIndex = res.data.pageIndex;
                        this.pageSize = res.data.pageSize;
                        this.recordCount = res.data.recordCount;
                        this.formInterfaceDataList = res.data.dataList;
                    }
                    this.isDeleteShowDrawer = false;
                    this.deleteInterfaceLoading = false;
                }).catch(res => {
                    this.isDeleteShowDrawer = false;
                    this.deleteInterfaceLoading = false;
                })
            }).catch(res => {
                this.isDeleteShowDrawer = false;
                this.deleteInterfaceLoading = false;
            })
        },
        handlePublishInterface(index, row) {
            this.dialogFormInfo.id = row.id;
            this.isPublishShowDrawer = true;
        },
        cancelPublishFormInterface() {
            this.isPublishShowDrawer = false;
        },
        commitPublishFormInterface() {
            this.publishInterfaceLoading = true;
            // 发布
            publishFormInterface({id: this.dialogFormInfo.id}).then(res => {
                if (res.code === "200") {
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success',
                    })
                }
                // 分页查询列表
                let pageParam = {
                    pageInfo: {
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize
                    },
                    id: this.searchFormInterfaceId,
                    formId: this.searchFormId,
                    formVersion: this.searchFormVersion,
                    nameCn: this.searchFormNameCn,
                    nameEn: this.searchFormNameEn
                }
                queryFormInterfacePageList(pageParam).then(res => {
                    if (res.code === "200") {
                        this.pageIndex = res.data.pageIndex;
                        this.pageSize = res.data.pageSize;
                        this.recordCount = res.data.recordCount;
                        this.formInterfaceDataList = res.data.dataList;
                    }
                    this.isPublishShowDrawer = false;
                    this.publishInterfaceLoading = false;
                }).catch(res => {
                    this.isPublishShowDrawer = false;
                    this.publishInterfaceLoading = false;
                })
            }).catch(res => {
                this.isPublishShowDrawer = false;
                this.publishInterfaceLoading = false;
            })
        },
        cancelAddFormInterface() {
            this.isShowDrawer = false;
        },
        commitAddFormInterface() {
            let formEl = this.$refs['dialogFormRef']
            if (!formEl) return;
            formEl.validate((valid) => {
                if (valid) {
                    this.addFormInterfaceLoading = true;
                    // 判断是添加还是修改
                    if (this.isAdd) {
                        this.dialogFormInfo.formConditionJson = JSON.stringify(this.dialogFormInfo.condition);
                        this.dialogFormInfo.formResJson = JSON.stringify(this.dialogFormInfo.result)
                        this.dialogFormInfo.formVersion = this.dialogFormInfo.version
                        createFormInterface(this.dialogFormInfo).then(res => {
                            if (res.code === "200") {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success',
                                })
                            }
                            // 分页查询列表
                            let pageParam = {
                                pageInfo: {
                                    pageIndex: this.pageIndex,
                                    pageSize: this.pageSize
                                },
                                id: this.searchFormInterfaceId,
                                formId: this.searchFormId,
                                formVersion: this.searchFormVersion,
                                nameCn: this.searchFormNameCn,
                                nameEn: this.searchFormNameEn
                            }
                            queryFormInterfacePageList(pageParam).then(res => {
                                if (res.code === "200") {
                                    this.pageIndex = res.data.pageIndex;
                                    this.pageSize = res.data.pageSize;
                                    this.recordCount = res.data.recordCount;
                                    this.formInterfaceDataList = res.data.dataList;
                                }
                                this.isShowDrawer = false;
                                this.addFormInterfaceLoading = false;
                            }).catch(res => {
                                this.isShowDrawer = false;
                                this.addFormInterfaceLoading = false;
                            })
                        }).catch(res => {
                            this.isShowDrawer = false;
                            this.addFormInterfaceLoading = false;
                        })
                    } else {
                        this.dialogFormInfo.formConditionJson = JSON.stringify(this.dialogFormInfo.condition);
                        this.dialogFormInfo.formResJson = JSON.stringify(this.dialogFormInfo.result)
                        this.dialogFormInfo.formVersion = this.dialogFormInfo.version
                        updateFormInterface(this.dialogFormInfo).then(res => {
                            if (res.code === "200") {
                                ElNotification({
                                    title: 'Success',
                                    message: res.message,
                                    type: 'success',
                                })
                            }
                            // 分页查询列表
                            let pageParam = {
                                pageInfo: {
                                    pageIndex: this.pageIndex,
                                    pageSize: this.pageSize
                                },
                                id: this.searchFormInterfaceId,
                                formId: this.searchFormId,
                                formVersion: this.searchFormVersion,
                                nameCn: this.searchFormNameCn,
                                nameEn: this.searchFormNameEn
                            }
                            queryFormInterfacePageList(pageParam).then(res => {
                                if (res.code === "200") {
                                    this.pageIndex = res.data.pageIndex;
                                    this.pageSize = res.data.pageSize;
                                    this.recordCount = res.data.recordCount;
                                    this.formInterfaceDataList = res.data.dataList;
                                }
                                this.isShowDrawer = false;
                                this.addFormInterfaceLoading = false;
                            }).catch(res => {
                                this.isShowDrawer = false;
                                this.addFormInterfaceLoading = false;
                            })
                        }).catch(res => {
                            this.isShowDrawer = false;
                            this.addFormInterfaceLoading = false;
                        })
                    }
                }
            })

        },
        handleVersionTest(index, row) {
            this.isTestVersionShowDrawer = true
            this.testVersionComponentList = []
            this.outputInfo = ""
            this.testVersionInfo = {
                resourceId: row.resourceId,
                version: row.version
            }
            // 根据当前的表单ID和版本查询对应的表单构建信息
            queryVersionInfo({resourceId: row.formId, version: row.formVersion}).then(res => {
                let formJson = res.data.formJson
                // 序列化json
                let jsonInfo = JSON.parse(formJson);
                this.testVersionGlobalProperties = jsonInfo.globalProperties
                let componentList = jsonInfo.componentJson
                let style = "display: grid;gap: 16px;"
                let repeat = `grid-template-columns: repeat(${this.testVersionGlobalProperties.colNum}, 1fr);`
                this.formColStyle = style + repeat;
                // 与当前的配置的入参进行遍历，找出已经配置的组件
                let conditionIdList = JSON.parse(row.formConditionJson)
                for (let index = 0; index < componentList.length; index++) {
                    for (let innerIndex = 0; innerIndex < conditionIdList.length; innerIndex++) {
                        if (componentList[index].id === conditionIdList[innerIndex]) {
                            this.testVersionComponentList.push({
                                labelName: componentList[index].labelName,
                                id: conditionIdList[innerIndex],
                                value: ""
                            })
                        }
                    }
                }
            })
        },
        handleBackVersion(index, row) {
            this.versionInfo.resourceId = row.resourceId
            this.versionInfo.version = row.version;
            this.isBackVersionShowDrawer = true;
        },
        handleDeleteVersion(index, row) {
            this.versionInfo.resourceId = row.resourceId
            this.versionInfo.version = row.version;
            this.isDeleteVersionShowDrawer = true;
        },
        cancelDeleteVersionInterface() {
            this.isDeleteVersionShowDrawer = false
        },
        commitDeleteVersionInterface() {
            this.deleteVersionInterfaceLoading = true;
            deleteInterfaceVersion(this.versionInfo).then(res => {
                if (res.code === "200") {
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success',
                    })
                }
                // 查询表单外部接口历史版本列表
                let param = {
                    id: this.versionInfo.resourceId
                }
                this.versionList = []
                this.isVersionListShowDrawer = true;
                queryInterfaceVersionList(param).then(res => {
                    if (res.code === "200") {
                        let dataInfo = res.data;
                        for (let index = 0; index < dataInfo.length; index++) {
                            this.versionList = res.data;
                        }
                    }
                    this.deleteVersionInterfaceLoading = false;
                    this.isDeleteVersionShowDrawer = false;
                }).catch(res => {
                    this.deleteVersionInterfaceLoading = false;
                    this.isDeleteVersionShowDrawer = false;
                })
            }).catch(res => {
                this.deleteVersionInterfaceLoading = false;
                this.isDeleteVersionShowDrawer = false;
            })
        },
        cancelBackVersionInterface() {
            this.isBackVersionShowDrawer = false;
        },
        commitBackVersionInterface() {
            this.backVersionInterfaceLoading = true;
            backInterfaceVersion(this.versionInfo).then(res => {
                if (res.code === "200") {
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success',
                    })
                }
                // 查询表单外部接口历史版本列表
                let param = {
                    id: this.versionInfo.resourceId
                }
                this.versionList = []
                this.isVersionListShowDrawer = true;
                queryInterfaceVersionList(param).then(res => {
                    if (res.code === "200") {
                        let dataInfo = res.data;
                        for (let index = 0; index < dataInfo.length; index++) {
                            this.versionList = res.data;
                        }
                    }
                    this.backVersionInterfaceLoading = false;
                    this.isBackVersionShowDrawer = false;
                }).catch(res => {
                    this.backVersionInterfaceLoading = false;
                    this.isBackVersionShowDrawer = false;
                })
            }).catch(res => {
                this.backVersionInterfaceLoading = false;
                this.isBackVersionShowDrawer = false;
            })
        },
        commitTestVersionInterface() {
            this.testVersionInfo.execParam = this.testVersionComponentList
            this.testVersionInterfaceLoading = true
            // 执行调试
            execByVersion(this.testVersionInfo).then(res => {
                this.outputInfo = JSON.stringify(res);
                this.testVersionInterfaceLoading = false
            }).catch(res => {
                this.testVersionInterfaceLoading = false
            })
        }
    },
    mounted() {
        // 查询表单列表
        let param = {
            pageInfo: {
                pageIndex: 1,
                pageSize: 10000
            },
            status: "ONLINE"
        }
        queryFormPageList(param).then(res => {
            this.onlineFormList = res.data.dataList;
        })
        // 查询表单外部接口列表
        let pageParam = {
            pageInfo: {
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }
        }
        queryFormInterfacePageList(pageParam).then(res => {
            if (res.code === "200") {
                this.pageIndex = res.data.pageIndex;
                this.pageSize = res.data.pageSize;
                this.recordCount = res.data.recordCount;
                this.formInterfaceDataList = res.data.dataList;
            }
        })
    }
}
</script>

<style scoped lang="less">
.formSubmitButton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 30px;
}
</style>